<template>
	<div class="glass footer">
		<div class="bar">
			<div class="year d-flex ai-center pointer" @click="chooseYear">
				<img class="icon" :src="isPlay?pause:play" alt="" @click.stop="toogle()" />
				<p class="font-numer">{{ data.year }}</p>
				<div class="yearPicker">
					<el-date-picker @change="yearChange()" ref="yearPicker" v-model="data.year" value-format="YYYY"
						:disabled-date="disabledDate" type="year" />
				</div>
			</div>
			<div class="slide d-flex">
				<!-- <img class="slideImg pointer" :src="arrowL" alt=""> -->
				<el-scrollbar ref="scrollContainer" @wheel.prevent="handleScroll">
					<div class="dates d-flex">
						<div v-for="(item, index) in dateList" :key="index"  :ref="(el) => {
                  scrollDates[index] = el;
                }" class="pointer" @click="datesActived(index)">
							<div :class="['font-numer', item.actived ? 'actived' : '']">
								{{ item.date }}
							</div>
							<div class="trackBar d-flex">
								<div class="track"></div>
								<div :class="['btn', item.actived ? 'actived' : '']"></div>
								<div class="track"></div>
							</div>
						</div>
					</div>
				</el-scrollbar>
				<!-- <img class="slideImg pointer" :src="arrowR" alt=""> -->
			</div>
		</div>
	</div>
</template>
  
<script lang="ts">
const PropsType = {
	data: {
		type: Array,
		default: [],
		require: true,
	},
} as const;
import {
	defineComponent,
	ref,
	reactive,
	onMounted,
	onUnmounted,
	computed,
	watch
} from "vue";
import moment from "moment";
export default defineComponent({
	props: PropsType,
	components: {},
	setup(props, context) {
		//变量
		const play = require("@/assets/img/play.png");
		const pause = require("@/assets/img/pause.png");
		const arrowL = require("@/assets/img/arrow_left.png");
		const arrowR = require("@/assets/img/arrow_right.png");
		const dateList = ref([]);
		const isPlay = ref(true)
		const scrollDates = ref([])
		const data = reactive({
			year: moment().format("YYYY"),
			actived: 0
		});
		const timeInfo = reactive({
      setInterval: null,
			index:0
    })

		const scrollWrapper = computed(() => {
			return scrollContainer.value.wrapRef;
		});
		const scrollContainer = ref();
		const yearPicker = ref()
		// 生命周期
		onMounted(() => {
      startInterval()
    })

    onUnmounted(() => {
      clearInterval(timeInfo.setInterval)
    })

    // todo 处理时间监听
    

		watch(
			() => props.data,
			(val: any) => {
				clearInterval(timeInfo.setInterval)
				dateList.value = val.map((item, index) => {
					return {
						date: item.date,
						wms:item.wms,
						actived: index == 0 ? true : false,
					};
				});
				data.actived = 0
				timeInfo.index = 0
				startInterval()
				// if (scrollWrapper.value) {
				// 	setTimeout(() => {
				// 		const $scrollWrapper = scrollWrapper.value;
				// 		$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth;
				// 	}, 100);
				// }
			}
		);

		//methods
		//获取当前日期的指定前后index天的日期数组 index默认为0时只取当天的日期
		const getDates = (index = 0) => {
			let dates = [];
			let today = moment().format("MM.DD");
			let startTime = moment().subtract(index, "days");
			dates.push({ date: startTime.format("MM.DD"), actived: false });
			for (let i = 1; i < index * 2 + 1; i++) {
				let day = moment(startTime).add(i, "days").format("MM.DD");
				dates.push({ date: day, actived: day == today ? true : false });
			}
			return dates;
		};

		//
		const datesActived = (val) => {
			timeInfo.index = val
			dateList.value.forEach((item, index) => {
				item.actived = index == val ? true : false;
			});
			data.actived = val
			timeChange()
		};

		const handleScroll = (e: any) => {
			const eventDelta = e.wheelDelta || -e.deltaY * 20;
			const $scrollWrapper = scrollWrapper.value;
			$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - eventDelta / 2;
		};

		const chooseYear = () => {
			yearPicker.value.focus()
		};

		const timeChange = () => {
			context.emit('timeChange', data.year + '-' + dateList.value[data.actived].date)
		}

		const yearChange = () => {
			context.emit('yearChange', data.year)
		}

		const disabledDate = (time) => {
			return moment(time).format('YYYY') > moment().format('YYYY')
		}

		const toogle = () =>{
			isPlay.value = !isPlay.value
			if(!isPlay.value){
				clearInterval(timeInfo.setInterval)
			}else{
				startInterval()
			}
		}

		const startInterval = ()=>{
			timeInfo.setInterval = setInterval(() => {
				const $scrollWrapper = scrollWrapper.value;
				if(timeInfo.index > dateList.value.length-1){
					timeInfo.index = 0
					$scrollWrapper.scrollLeft = 0
					datesActived(timeInfo.index)
				}else{
					if(scrollDates.value[timeInfo.index].offsetLeft>$scrollWrapper.offsetWidth-scrollDates.value[timeInfo.index].offsetWidth){
						$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft - (-140) / 2;
					}
					datesActived(timeInfo.index)
				}
				timeInfo.index ++ 
      }, 1000)
		}

		// return
		return {
			data,
			play,
			arrowL,
			arrowR,
			dateList,
			getDates,
			datesActived,
			handleScroll,
			chooseYear,
			scrollContainer,
			yearPicker,
			disabledDate,
			yearChange,
			toogle,
			isPlay,
			pause,
			scrollDates
		};
	},
});
</script>
  
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.yearPicker {
	width: 0px;
	overflow: hidden;
	position: absolute;
	left: 0;
}
</style>
  